<template>
    <div class="topBox">
        <div class="L"><a href="index.html">LOGO</a></div>
        <div class="C">
            <div class="saerchbox">
                <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/assets/images/ss.png">
            </div>
        </div>
        <div class="R">
            <a href="map.html"><img src="/assets/images/map.png"></a>
        </div>
    </div>
    <div class="clear"></div>
    <div class="aui-m-slider">
        <div class="m-slider" data-ydui-slider>
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="item in HotList" :key="item.id">
                    <img :src="item.thumb_cdn" />
                </van-swipe-item>
            </van-swipe>

        </div>
    </div>
    <div class="clear"></div>
    <div class="lqgwBox">
        <ul>
            <li>
                <router-link to="/product/product/index">
                    <img src="/assets/images/quanbu.png">
                    <p>全部商品</p>
                </router-link>
            </li>
            <li>
                <a href="live.html">
                    <img src="/assets/images/zibo.png">
                    <p>商品直播</p>
                </a>
            </li>
            <li>
                <router-link to="product/coupon/index">
                    <img src="/assets/images/youhui.png">
                    <p>优惠活动</p>
                </router-link>
            </li>
            <li>
                <a href="ranking.html">
                    <img src="/assets/images/bandan.png">
                    <p>榜单排行</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="contitbox">
        <p>新品<span>•</span>推荐</p>
    </div>
    <div class="clear"></div>
    <ul class="proul">
        <li v-for="item in RecommendList" :key="item.id">
            <div class="con">
                <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                    <img :src="item.thumb_cdn">
                    <p><span>￥</span>{{ item.price }}</p>
                </router-link>
            </div>
        </li>
        
    </ul>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>

    <Footer />
</template>

<script setup>
import { routerKey } from 'vue-router';
import Footer from './common/Footer.vue';

const { proxy } = getCurrentInstance();

const HotList = ref([]);
const RecommendList = ref([]);

onBeforeMount(() => {
    getHomeData();
})

const getHomeData = async () => {
    let result = await proxy.$post({
        url:'/index/home'
    })

    if(result.code === 1)
    {
        HotList.value = result.data.hotList;
        // console.log(HotList.value);
        RecommendList.value = result.data.recommendList;
    }
}

</script>